﻿<%@ page language="java" import="com.newcrm.config.Const,com.newcrm.util.Util,com.newcrm.db.CompanyBusinessArchiveManager,com.newcrm.businessarchives.*,com.newcrm.bean.*,com.newcrm.db.CustomerCategoryManager,com.newcrm.db.CustomerFieldManager,java.net.URLEncoder,java.util.List,java.util.Map,java.util.ArrayList,java.util.Date" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
  User user = (User) session.getAttribute("user");
  Map<Integer, CompanyInfo> companys = (Map<Integer, CompanyInfo>) application.getAttribute(Const.APPLICATION_COMPANYS);
  CompanyInfo companyInfo = companys.get(Integer.valueOf(user.companyId));
  List<User> users = companyInfo.users;
  // 坐席对应的部门信息
  List<Map<String, Object>> seats = (List<Map<String, Object>>)request.getAttribute("seats");

  // 用户所属部门
  Group userGroup = companyInfo.getGroupById(user.groupId);

  List<Group> allGroups = companyInfo.getAllGroups();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>呼叫中心统计分析</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="renderer" content="webkit"/>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <link rel="shortcut icon" href="<%=request.getContextPath()%>/images/qikebao.ico" />
  <link rel="stylesheet" href="<%=request.getContextPath()%>/css/all.css?ver=<%=Const.VERSION%>">
  <link rel="stylesheet" href="<%=request.getContextPath()%>/css/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="<%=request.getContextPath()%>/css/datepicker.css" />
  <link rel="stylesheet" href="<%=request.getContextPath()%>/css/bootstrap-datetimepicker.min.css" />
  <link rel="stylesheet" href="<%=request.getContextPath()%>/css/magnific-popup.css">
  <link rel="stylesheet" href="<%=request.getContextPath()%>/css/jplayer.blue.monday.min.css">
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/jquery-1.11.1.min.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/bootstrap.min.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/jquery-ui.min.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/jquery.bootstrap-growl.min.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/moment.min.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/bootstrap-datepicker.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/bootstrap-datetimepicker.min.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/daterangepicker.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/jquery.magnific-popup.min.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/jquery.cookie.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/stupidtable.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/highcharts.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/popbox.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/common.js?ver=<%=Const.VERSION%>"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/voipreport.js?ver=<%=Const.VERSION%>"></script>
  <script>
    var userId = "<%=user.userId%>";
    var pageSize = <%=Const.PAGE_SIZE%>;
    <%if (!user.isAdmin) {%>
    var isGroupAdmin = true;
    <%} else {%>
    var isGroupAdmin = false;
    <%}%>
    var allUsers = new Array();
    <%if (users != null) {
        for (User u:users) {
        %>
    allUsers.push({id:"<%=u.userId%>",name:"<%=Util.UEncode(u.name)%>",photo:"<%=u.imgPath%>"});
    <%  }
      } %>
    var groupUsers = new Array();
    <%
    if (seats != null) {
      for (Map<String, Object> seat:seats) {
        int groupId = (Integer) seat.get("GroupId");
        if (!companyInfo.isGroupAdmin(user, groupId)) {
          continue;
        }
        %>
    groupUsers.push({groupId:<%=seat.get("GroupId")%>, groupName:"<%=Util.UEncode((String)seat.get("GroupName"))%>", seatNum:"<%=Util.UEncode((String)seat.get("UserName"))%>", userName:"<%=Util.UEncode((String)seat.get("Name"))%>"});
  <%  }
    }%>
  </script>
</head>
<body class="edit_identity">
  <jsp:include page="topNavi.jsp" flush="true"/>
  <div class="main-page">
    <div class="profile-header">
      <div><img src="<%=request.getContextPath()%>/images/phone.png"></div>
      <div class="detail">
        <h1>呼叫中心统计分析</h1>
        <p>按各个维度统计分析呼叫中心使用情况</p>
      </div>
    </div>
    <div class="clearfix"></div>
    <div class="profile-info-tabs">
      <ul class="nav-tabs" id="tabs">
        <li class="active"><a href="#navi-1">坐席工作量报表</a></li>
        <li><a href="#navi-2">部门工作量报表</a></li>
        <li><a href="#navi-3">外呼地域报表</a></li>
      </ul>
      <div class="nav-detail">
        <div id="navi-1" class="tab-container body setting-panel">
          <h1>坐席工作量报表</h1>
          <div class="callrecords_searchbar">
            <span>
              统计时间 <input type="text" id="callRecord-seat-searchDate" value="<%=Util.date2Str2(new Date())%> ~ <%=Util.date2Str2(new Date())%>" class="daterangepickerinput">
            </span>
            <span>
              通话平均时长区间
              <input type="text" class="searchinput" value="0" id="seat-minTotalTime">
              -- <input type="text" class="searchinput" value="0" id="seat-maxTotalTime">
              秒</span>
            <a href="#" id="search_call_agent_records" class="button green"><i class="fa fa-search"></i> 检索</a>
          </div>
          <div id="callreport_agent_loading" class="loading">
            <div class="liner">
              <h3>统计分析加载中...</h3>
              <img alt="Dots-white" src="<%=request.getContextPath()%>/images/dots-white.gif" />
            </div>
          </div>
          <div id="callreport_agent_container" style="height:300px;min-width:310px;width:80%;"></div>
          <table class="callrecords stupidtable" style="width:80%;">
            <thead title="点击排序">
              <tr><th width="160">坐席</th><th data-sort="string">所属部门</th><th data-sort="int">通话总数</th><th data-sort="string">通话总时长</th><th data-sort="string">通话平均时长</th></tr>
            </thead>
            <tbody id="callreport_agent_list"></tbody>
            <tfoot id="callreport_agent_foot"></tfoot>
          </table>
        </div>

        <div id="navi-2" class="tab-container body setting-panel">
          <h1>部门工作量报表</h1>
          <div class="callrecords_searchbar">
            <span>
              统计时间 <input type="text" id="callRecord-group-searchDate" value="<%=Util.date2Str2(new Date())%> ~ <%=Util.date2Str2(new Date())%>" class="daterangepickerinput">
            </span>
            <span>
              通话平均时长区间
              <input type="text" class="searchinput" value="0" id="group-minTotalTime">
              -- <input type="text" class="searchinput" value="0" id="group-maxTotalTime">
              秒</span>
            <a href="#" id="search_call_group_records" class="button green"><i class="fa fa-search"></i> 检索</a>
          </div>
          <div id="callreport_group_loading" class="loading">
            <div class="liner">
              <h3>统计分析加载中...</h3>
              <img alt="Dots-white" src="<%=request.getContextPath()%>/images/dots-white.gif" />
            </div>
          </div>
          <div id="callreport_group_container" style="height:300px;min-width:310px;width:80%;"></div>
          <table class="callrecords stupidtable" style="width:80%;">
            <thead title="点击排序">
              <tr><th width="160">部门</th><th data-sort="int">通话总数</th><th data-sort="string">通话总时长</th><th data-sort="string">通话平均时长</th></tr>
            </thead>
            <tbody id="callreport_group_list"></tbody>
            <tfoot id="callreport_group_foot"></tfoot>
          </table>
        </div>

        <div id="navi-3" class="tab-container body setting-panel">
          <h1>外呼地域分布报表</h1>
          <div class="callrecords_searchbar">
            <span>
              统计时间 <input type="text" id="callRecord-area-searchDate" value="<%=Util.date2Str2(new Date())%> ~ <%=Util.date2Str2(new Date())%>" class="daterangepickerinput">
            </span>
            <span>
              通话平均时长区间
              <input type="text" class="searchinput" value="0" id="area-minTotalTime">
              -- <input type="text" class="searchinput" value="0" id="area-maxTotalTime">
              秒</span>
            <a href="#" id="search_call_dialoutArea_records" class="button green"><i class="fa fa-search"></i> 检索</a>
          </div>
          <div id="callreport_dialoutArea_loading" class="loading">
            <div class="liner">
              <h3>统计分析加载中...</h3>
              <img alt="Dots-white" src="<%=request.getContextPath()%>/images/dots-white.gif" />
            </div>
          </div>
          <table class="callrecords stupidtable" style="width:80%;">
            <thead title="点击排序">
              <tr><th width="160">省份</th><th data-sort="int">通话总数</th><th data-sort="string">通话总时长</th><th data-sort="string">外呼通话平均时长</th></tr>
            </thead>
            <tbody id="callreport_dialoutArea_list"></tbody>
            <tfoot id="callreport_dialoutArea_foot"></tfoot>
          </table>
        </div>
      </div>
    </div>
  </div>
</body>
</html>